/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import { View, TextInput, Dimensions } from 'react-native';
import { Icon,  List, Button, InputItem } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader } from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import Design from '../../design';
import Config from '../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Power_Retrieve extends PageBase {
    constructor (props) {
        super(props);
        this.state = {
            duration:120,
            durationBool:false,
            nextBool:true,
            input1: '',
            input2: '',
            input3: '',
            input4: ''
        };
    }

    getVerCode = () => {
        Dialog.text('验证码已发送到您的手机上');
        if(!this.state.durationBool){
            this.setState({
                durationBool: true,
            });
            var timer = setInterval(()=>{
                if(this.state.duration!=0){
                    this.setState({
                        duration : this.state.duration-1
                    });
                }else{
                    clearInterval(timer)
                    this.setState({
                        durationBool: false,
                        duration:120
                    });
                }
                console.log(this.state.duration)
            },1000)
        }
    }

    /************************************************************************************ Render */
    render(){
        return(
            <CPage>
				
                <CScroll bg='#efeff4' mt='96'>

                    {
                        this.state.nextBool ? (
						// if
                        <CColumn>
                            <CColumn mt='25' bg='#fff'>
                                {/* 请输入手机号码 */}
                                <CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' >
                                    <TextInput
                                        keyboardType = "numeric"
                                        style = {{height: 40, lineHeight:40,flex:1,fontSize:13, padding:0}}
                                        onChangeText = {(val)=> {
                                            this.setState({
                                                input1: val
                                            })
                                        }}
                                        value = {this.state.input1}
                                        clearTextOnFocus = {true}
                                        placeholder = "请输入手机号码"
                                        placeholderTextColor = "#c9c9c9"
                                        underlineColorAndroid = "transparent"
                                    />
                                </CLine>
                                {/* 请输入验证码 */}
                                <CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' >
                                    <TextInput
                                        style={{height: 40, lineHeight:40,flex:1,fontSize:13, padding:0}}
                                        onChangeText={(val)=> {
                                            this.setState({
                                                input2: val
                                            })
                                        }}
                                        value={this.state.input2}
                                        clearTextOnFocus={true}
                                        placeholder="请输入验证码"
                                        placeholderTextColor="#c9c9c9"
                                        underlineColorAndroid="transparent"
                                        secureTextEntry={true}
                                    />
                                    <CHand 
                                        h='46' py='8' ba='1 #00cc66' ra='3' x='center' y='center'
                                        style={{width:Config.map.screen.width/24*1+60,}}
                                        onPress={this.getVerCode}
                                    >
                                        <CText size='24' lh='40' color='#00cc66'>获取验证码</CText>
                                    </CHand>
                                </CLine>
                                
                            </CColumn>
                            {/* 登录 忘记密码 star */}
                            <CColumn py='10' mt='30' mx='40'>
                                <CButton onopacity='0.6' bg='#26c75e' color='#fff' size='30' py='15' ra='3' onPress={e=>{
                                    this.setState({
                                        nextBool:false
                                    })
                                }}>下一步</CButton>
                            </CColumn>
                            {/* 登录 忘记密码 end */}
                        </CColumn>

                        // if end
                        ):(
                        // else

                        <CColumn>
                            <CColumn mt='25' bg='#fff'>
                                {/* 请输入手机号码 */}
                                <CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' >
                                    <TextInput
                                        keyboardType="numeric"
                                        style={{height: 40, lineHeight:40,flex:1,fontSize:13, padding:0}}
                                        onChangeText={(val)=> {
                                            this.setState({
                                                input3: val
                                            })
                                        }}
                                        value={this.state.input3}
                                        clearTextOnFocus={true}
                                        placeholder="请输入6-12位的新密码"
                                        placeholderTextColor="#c9c9c9"
                                        underlineColorAndroid="transparent"
                                    />
                                </CLine>
                                {/* 请输入验证码 */}
                                <CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' >
                                    <TextInput
                                        style={{height: 40, lineHeight:40,flex:1,fontSize:13, padding:0}}
                                        onChangeText={(val)=> {
                                            this.setState({
                                                input4: val
                                            })
                                        }}
                                        value={this.state.input4}
                                        clearTextOnFocus={true}
                                        placeholder="请再次输入新密码"
                                        placeholderTextColor="#c9c9c9"
                                        underlineColorAndroid="transparent"
                                        secureTextEntry={true}
                                    />
                                </CLine>
                                
                            </CColumn>
                            {/* 登录 忘记密码 star */}
                            <CColumn py='10' mt='30' mx='40'>
                                <CButton onopacity='0.6' bg='#26c75e' color='#fff' size='30' py='15' ra='3' onPress={e=>{
                                    // 写提交表单时间事件，提交成功后跳只登陆页面，弹出修改成功提示，具体看图
                                }}>提交</CButton>
                            </CColumn>
                            {/* 登录 忘记密码 end */}
                        </CColumn>

                        // else end
                        )
                    }                    

                </CScroll>

                {/* header */}
				<PHeader nav={this.nav}>找回密码</PHeader>

            </CPage>
        )
    }
}
